<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

	<!-- <iframe src="http://www.baidu.com" frameborder="0"></iframe> -->
	<h1 id="outerH1">outer</h1>
	<iframe id="frame1" src="iframe_inner.html" frameborder="1"></iframe>

	<button id="setH1Btn">set inner H1</button>

	<script src="js/helper.js"></script>

	<script>

		var setH1Btn = Helper.dom('setH1Btn');
		var outerH1 = Helper.dom('outerH1');
		var frame1 = Helper.dom('frame1');
//		var innerH1 = Helper.dom('innerH1'); // ?????
		setH1Btn.onclick = function() {
			var cWindow = frame1.contentWindow;
			var cDocument = cWindow.document;
			var innerH1 = cDocument.getElementById('innerH1');
			innerH1.innerHTML = "888";

			cWindow.inner();

//			console.log(frame1.contentWindow.document);
		};

		function ptest() {
			alert('form outer...');
		}

		////////////////////////////////////////////////////////////////

//		var setH1Btn = document.getElementById('setH1Btn');
//		setH1Btn.onclick = function() {
//			/*var myH1 = document.getElementById('myH1');
//			myH1.innerHTML = "Hello wbc";*/
//
//			var frame1 = document.getElementById('frame1');
//			var cWin = frame1.contentWindow;
//			var myH1 = cWin.document.getElementById('myH1');
//			myH1.innerHTML = "Hello wbc";
//
//			cWin.hello();
//
//			// console.log(frame1.contentWindow.document.getElementById('myH1'));
//		};

//		function hello2() {
//			alert('hello2');
//		}

		// $('#frame1').contents().find('#myH1').html('hello wbc2');
	</script>
	
</body>
</html>